/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer} from '../../renderer';
import * as cx from 'classnames';

@Renderer({
  name: 'field-progress',
  desc: '...',
  test: /(?:^|\/)field\/progress$/
})
export default class ProgressField extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired
  };

  static defaultProps = {
    progressClassName: 'progress-xs progress-striped active m-t-xs m-b-none',
    progressBarClassName: ''
  };

  autoClassName(value) {
    return [
      'bg-danger',
      'bg-warning',
      'bg-info',
      'bg-success',
      'bg-success'
    ][Math.floor(value / 25)];
  }

  render() {
    const {
      className,
      progressClassName,
      progressBarClassName,
      value
    } = this.props;

    return (
      <div className={className}>
        <div className={cx("progress", progressClassName)}>
          <div
            className={cx("progress-bar", progressBarClassName || this.autoClassName(value))}
            title={`${value}%`}
            style={{
              width: `${value}%`
            }}
          ></div>
        </div>
        <div>{value}%</div>
      </div>
    );
  }
}
